
var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay: 2000,

    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
})
console.log(11111);





// 将需要执行的程序 定义在 加载事件中 确保html标签加载完毕再触发执行
$(function () {
    // 默认显示 第一页内容
    setPage(1);
})


// 使用 async 封装定义 函数 
async function setPage(page) {

 
       
    


//     // 新品
//     // 设定 每页显示的数据数量
//     let line = 4;
//     // 发送ajax请求 
//     let res = await myPromiseAjax({
//         url: '../server/goods_list.php',
//         type: 'get',
//         data: {
//             cat_one_id: `食品酒水`,
//             line: line,
//             page: page,
//         },
//     });
//     res = JSON.parse(res);
//     console.log(res);
//     // 根据数据 动态生成页面 
//     let str = '';
//     // 循环遍历 res.data 数组
//     res.data.forEach(item => {
//         str += `
//         <img src="${item.goods_big_logo}"  id=${item.goods_id}  alt="">
//   `;
//         // 将 结果 写入 ul标签中
//         $('.box6').html(str);

//     })
//     $('.box6').click(function (event) {
//         if (event.target.tagName === 'IMG') {
//             let id = event.target.getAttribute(`id`)
//             window.location.href = `./detail.html?goods_id=${id}`;
//         }
//     })


// 限时购

// 发送ajax请求 
let res1 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `食品酒水`,
        line: 5,
        page: 2,
    },
});
res1 = JSON.parse(res1);
console.log(res1);
// 根据数据 动态生成页面 
let str1 = '';
// 循环遍历 res.data 数组
res1.data.forEach(item => {
    str1 += `
        <div class="lattice aa" class="aa" id=${item.goods_id}>
        <div class="top aa" id=${item.goods_id}>
            <img src="${item.goods_big_logo}" alt="" class="aa" id=${item.goods_id}>
            <p class="aa" id=${item.goods_id}>晒图评价抽积分</p>
        </div>
        <p class="aa" id=${item.goods_id}> ${item.goods_name}</p> 
        <p class="aa" id=${item.goods_id}> ￥${item.goods_price}</p>
    </div>
  `;
    // 将 结果 写入 ul标签中
    $('.cianshi').html(str1);

})
$('.cianshi').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})
 
//热销单品

// 发送ajax请求 
let res2 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `食品酒水`,
        line: 8,
        page: 5,
    },
});
res2 = JSON.parse(res2);
console.log(res2);
// 根据数据 动态生成页面 
let str2 = `<div class="big">
               <img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
                </div>`;
// 循环遍历 res.data 数组
res2.data.forEach(item => {
    str2 += `
        <div class="li aa" class="aa" id=${item.goods_id} id=${item.goods_id}>
            <img src="${item.goods_big_logo}" alt="" class="aa" id=${item.goods_id}>
            <p class="aa" id=${item.goods_id}>${item.goods_name}</p>
            <p class="aa" id=${item.goods_id}>享12期免息</p>
            <p class="aa" id=${item.goods_id}>￥${item.goods_price}</p>
        </div>
  `;
    // 将 结果 写入 ul标签中
    $('.rexiao').html(str2);

})


$('.rexiao').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})




// 精品推荐

// 发送ajax请求 
let res3 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `食品酒水`,
        line: 5,
        page: 6,
    },
});
res3 = JSON.parse(res3);
console.log(res3);
// 根据数据 动态生成页面 
let str3 = '';
// 循环遍历 res.data 数组
res3.data.forEach(item => {
    str3 += `
        <div class="lattice aa" class="aa" id=${item.goods_id}>
        <div class="top aa" class="aa" id=${item.goods_id} id=${item.goods_id}>
            <img class="aa" id=${item.goods_id} src="${item.goods_big_logo}" alt="">
            <p class="aa" id=${item.goods_id}>晒图评价抽积分</p>
        </div>
        <p class="aa" id=${item.goods_id}>${item.goods_name}</p> 
        <p class="aa" id=${item.goods_id}>￥${item.goods_price}</p>
    </div>
  `;
    // 将 结果 写入 ul标签中
    $('.jinpintuijian').html(str3);

})
$('.jinpintuijian').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

//手机

// 发送ajax请求 
let res4 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `食品酒水`,
        line: 8,
        page: 3,
    },
});
res4 = JSON.parse(res4);
console.log(res4);
// 根据数据 动态生成页面 
let str4 = `<div class="big" >
    <img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
              </div>`;
// 循环遍历 res.data 数组
res4.data.forEach(item => {
    str4 += `
        <div class="li aa"  class="aa" id=${item.goods_id}  id=${item.goods_id}>
            <img  class="aa" id=${item.goods_id} src="${item.goods_big_logo}" alt="">
            <p class="aa" id=${item.goods_id} >${item.goods_name}</p>
            <p class="aa" id=${item.goods_id} >享12期免息</p>
            <p class="aa" id=${item.goods_id} >￥${item.goods_price}</p>
        </div>
  `;
    // 将 结果 写入 ul标签中
    $('.shouji').html(str4);
})
$('.shouji').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

// 笔记本电脑

// 发送ajax请求 
let res5 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `童装玩具`,
        line: 8,
        page: 1,
    },
});
res5 = JSON.parse(res5);
console.log(res5);
// 根据数据 动态生成页面 
let str5 = `<div class="big">
<img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
          </div>`;
// 循环遍历 res.data 数组
res5.data.forEach(item => {
    str5 += `
    <div class="li aa"  class="aa" id=${item.goods_id}  id=${item.goods_id}>
        <img class="aa" id=${item.goods_id}  src="${item.goods_big_logo}" alt="">
        <p class="aa" id=${item.goods_id} >${item.goods_name}</p>
        <p class="aa" id=${item.goods_id} >享12期免息</p>
        <p class="aa" id=${item.goods_id} >￥${item.goods_price}</p>
    </div>
`;
    // 将 结果 写入 ul标签中
    $('.diannao').html(str5);
})
$('.diannao').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

// 精品平板

// 发送ajax请求 
let res6 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `家装建材`,
        line: 8,
        page: 1,
    },
});
res6 = JSON.parse(res6);
console.log(res6);
// 根据数据 动态生成页面 
let str6 = `<div class="big">
<img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
          </div>`;
// 循环遍历 res.data 数组
res6.data.forEach(item => {
    str6 += `
    <div class="li aa" id=${item.goods_id}>
        <img  class="aa" id=${item.goods_id} src="${item.goods_big_logo}" alt="">
        <p class="aa" id=${item.goods_id} >${item.goods_name}</p>
        <p class="aa" id=${item.goods_id} >享12期免息</p>
        <p class="aa" id=${item.goods_id} >￥${item.goods_price}</p>
    </div>
`;
    // 将 结果 写入 ul标签中
    $('.pingban').html(str6);
})
$('.pingban').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

// 智能穿戴

// 发送ajax请求 
let res7 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `奶粉尿裤`,
        line: 8,
        page: 1,
    },
});
res7 = JSON.parse(res7);
console.log(res7);
// 根据数据 动态生成页面 
let str7 = `<div class="big">
<img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
          </div>`;
// 循环遍历 res.data 数组
res7.data.forEach(item => {
    str7 += `
    <div class="li"  class="aa" id=${item.goods_id} id=${item.goods_id}>
        <img  class="aa" id=${item.goods_id} src="${item.goods_big_logo}" alt="">
        <p class="aa" id=${item.goods_id} >${item.goods_name}</p>
        <p class="aa" id=${item.goods_id} >享12期免息</p>
        <p class="aa" id=${item.goods_id} >￥${item.goods_price}</p>
    </div>
`;
    // 将 结果 写入 ul标签中
    $('.chuandai').html(str7);
})
$('.chuandai').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

// 智慧屏

// 发送ajax请求 
let res8 = await myPromiseAjax({
    url: '../server/goods_list.php',
    type: 'get',
    data: {
        cat_one_id: `手机相机`,
        line: 8,
        page: 1,
    },
});
res8 = JSON.parse(res8);
console.log(res8);
// 根据数据 动态生成页面 
let str8 = `<div class="big">
<img src="./../images/网页捕获_2-05538_www.hihonor_30.png" alt="">
          </div>`;
// 循环遍历 res.data 数组
res8.data.forEach(item => {
    str8 += `
    <div class="li aa" class="aa" id=${item.goods_id}  id=${item.goods_id}>
        <img  class="aa" id=${item.goods_id} src="${item.goods_big_logo}" alt="">
        <p class="aa" id=${item.goods_id} >${item.goods_name}</p>
        <p class="aa" id=${item.goods_id} >享12期免息</p>
        <p class="aa" id=${item.goods_id} >￥${item.goods_price}</p>
    </div>
`;
    // 将 结果 写入 ul标签中
    $('.ping').html(str8);
})

}
$('.ping').click(function (event) {
    if (event.target.className === `aa`) {
        let id = event.target.getAttribute(`id`)
        window.location.href = `./detail.html?goods_id=${id}`;
    }
})

$('[name="logout"]').click(() => {
    const cookieObj = myGetCookie();
    console.log(cookieObj);
    if (cookieObj.login === undefined) {
        if (window.confirm('您还未登录 点击确定 跳转登录页')) {
            window.location.href = './login.html';
        }
    } else {
        mySetCookie({
            key: 'login',
            path: '/',
            val: 100,
            time: -1,
        })
        window.alert('您已退出登录');
        $('[name="yidenglu"]').html(`<a href="./login.html?url=./index.html" >登录</a>`)
    
    }
}
)
$('[name="cart"]').click(() => {
    const cookieObj = myGetCookie();
    console.log(cookieObj);
    if (cookieObj.login === undefined) {

        if (window.confirm('您还未登录 点击确定 跳转登录页')) {
            window.location.href = './login.html';
        }
    } else {
        window.location.href = './cart.html';
    }
})
const cookieObj = myGetCookie();
if (cookieObj.login === undefined) {
    $('[name="yidenglu"]').html(`<a href="./login.html?url=./index.html" >登录</a>`)
    } else {
    $('[name="yidenglu"]').html(`<a href="#" >已登录</a>`)
 
}
var oBox = document.querySelector('.box5');
var oUl=oBox.querySelector('ul');
var oUlLis = oBox.querySelectorAll('ul>li');
console.log( oUlLis );
var oOlLis = oBox.querySelectorAll('ol>li');
console.log( oOlLis );
oUlLis.forEach( function(item , key){
    item.addEventListener( 'mouseover' , function(){
        oUlLis.forEach(function( i , k ){
            i.classList.remove( 'active' );
            oOlLis[k].classList.remove('active');
        })
        item.classList.add('active');
        oOlLis[key].classList.add('active');
    })
})
oBox.addEventListener( 'mouseleave' , function(){
        oUlLis.forEach(function( i , k ){
            i.classList.remove( 'active' );
        })
        oOlLis.forEach(function( i , k ){
            i.classList.remove( 'active' );
        })
    
    })

    $(window).scroll( function(){

        // 吸顶div 和 侧边栏div 隐藏显示
        if( $('html').scrollTop() > 800 ){
            // 侧边栏div 逐渐显示
            $('.sidebar').fadeIn();
        }else{
            // 侧边栏div 逐渐消失
            $('.sidebar').fadeOut();

        }

        // 根据 页面上卷距离 给对应的 侧边栏li 添加 css样式
        // 给 楼层li 添加 判断事件
        $('.storey ul li').each( (key , item) =>{
            // 当 上卷距离 . 当前标签和html页面上间距 
            // 给 楼层li 对应的 侧边栏li 添加 class,active 其他的清除class,active
            if( $(window).scrollTop() + 400 > $(item).offset().top ){
                // 给 楼层li 索引下标相同的 侧边栏li 添加样式
                $('.sidebar ul li').eq( key ).addClass('active').siblings().removeClass('active');
            }
        })
    })

    $('.sidebar ul li').click( event =>{

        if( event.target.getAttribute('name') === 'back' ){
            // 点击的是 返回顶部 侧边栏li 
            // 通过动画 让 页面上卷距离 是 0
            $('html').animate( { scrollTop : 0 } , 1000 ) ;


        }else if( event.target.getAttribute('name') === 'other' ){
            // 按照 点击的侧边栏li的索引下标 找到 对应的 楼层li标签 
            // 获取对应楼层变量 和 html页面的上间距 减去 预留高度 
            // 结果 设定给 浏览器上卷距离
            let scrollTop = $('.storey ul li').eq( $(event.target).index() ).offset().top;


            // 点击的是 其他 侧边栏li 
            // 通过动画 让 页面上卷距离 是 点击的侧边栏li的索引下标 对应的 楼层li标签和html的上间距
            $('html').animate( { scrollTop : scrollTop - 200 } , 1000 ) ;
        }
    })































































